<template>
  <div>
    <a-select
        :disabled="disabled || readOnly"
        :show-search="showSearch"
        :placeholder="placeholder"
        option-filter-prop="children"
        style="text-indent:0px;width: 50%"
        :filter-option="filterOption"
        v-model="value"
        @change="onChange"
        >
        <a-select-option
            :title="option.title"
            :value="option.id"
            v-for="(option, index) in selectOption"
            :key="index"
        >{{ option.title }}</a-select-option>
        </a-select>
  </div>
</template>
<script>
  export default {
    name: 'SelectModel',
    props: {
      placeholder:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      readOnly:{
        type: Boolean,
        required: false,
        default: false
      },
      showSearch:{
        type: Boolean,
        required: false,
        default: false
      },
      disabled:{
        type: Boolean,
        required: false,
        default: false
      },
      selectOption:{
        type: Array,
        required: false,
        default: false
      },
      filterOption:{
        type: Function,
        required: false,
        default: () => function(input, option){
            return (
                option.componentOptions.children[0].text
                .toLowerCase()
                .indexOf(input.toLowerCase()) >= 0
            );
        }
      }
    },
    data () {
      return {
        }
    },
    watch: {
    //   value (val) {
    //     if(!val){
    //       this.momVal = null
    //     }else{
    //       this.momVal = moment(val,this.dateFormat)
    //     }
    //   }
    },
    methods: {
        onChange(e){
            console.log(e)
        },
    },
    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
